<template>
    <p>Home</p>
    <h1>js跳转</h1>
    <button @click="pushStr">push-字符串-跳转</button>
    <button @click="pushPath">push-路径-跳转</button>
    <button @click="pushName">push-名字-跳转</button>
    <p>传递参数</p>
    <button @click="pushNameParams">push-名字-params-跳转</button>
    <button @click="pushPathQuery">push-路径-query-跳转</button>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const pushStr = () => {
    router.push('/about')
}

const pushPath = () => {
    router.push({ path: '/about' })
}

const pushName = () => {
    router.push({ name: 'about' })
}

const pushNameParams = () => {
    router.push({ name: 'about', state: { params: { name: 'tom' } } })
}

const pushPathQuery = () => {
    router.push({ path: '/about', query:{name: 'tom'} })
}

</script>